body {
    background-color: cornflowerblue;
}
.box {
    width: 150px;
    height: 300px;
    margin: 50px auto;
    position: relative;
    transform: rotate(45deg);
    .box-0 {
        width: 200px;
        height: 200px;
        background-color: pink;
        border-radius: 0 200px;
        position: absolute;
        bottom: 0px;
        left: -80%;
        transform-origin: bottom right;
        transition: all 2s linear .2s;
        // background-color: darkorange;
    }
    .guzi {
        width: 10px;
        height: 200px;
        background-color: pink;
        position: absolute;
        top: 265px;
        left: 139px;
        transform: rotate(315deg);
        border-radius: 10px;
    }

}
.box:hover {
    .loop( @dushu , @blbl ) when ( @dushu > 0 ){
    
        .box-0:nth-child( @{dushu} ){
            transform: rotate(@blbl);
        }
        .loop( @dushu - 1 , @blbl + 25deg );
    }
    .loop( 3 , -75deg );

    .bb( @dush , @blb ) when ( @dush >= 4 ){
    
        .box-0:nth-child( @{dush} ){
            transform : rotate(@blb);
        }
        .bb( @dush - 1 , @blb - 25deg );
    }
    .bb( 7 , 75deg );
    .box-0 {
        background-image: linear-gradient(to bottom, orangered , red , purple , green);
        opacity: .5;
    }
    .guzi {
        opacity: .5;
        background-image: linear-gradient(to bottom,green,purple,red,orangered);
    }
}
